<template>
    <div style="margin: 20px;">
        <div>
            <Row style="margin-bottom: 25px;">
                <Col span="8">个股代码：
                    <input v-model="symbol" placeholder="请输入..." style="width:200px"></Input>
                </Col>
                <Col span="8">
                    <Button type="primary" shape="circle" icon="ios-search" @click="search()">搜索</Button>
                </Col>
            </Row>
        </div>
        <div>
            <ul>
                <li>
                    <div style="padding: 10px 0;">
                        <v-table
                                column-width-drag
                                is-vertical-resize
                                is-horizontal-resize
                                style="width:100%"
                                :columns="columns1"
                                :table-data="datas"
                                :row-click="rowClick"
                                :column-cell-class-name="columnCellClass"
                                row-hover-color="#eee"
                                row-click-color="#edf7ff"
                        ></v-table>
                        <!--<Table border :columns="columns1" :data="datas" :height="400"
                               @on-selection-change="s=>{change(s)}" @on-row-dblclick="s=>{dblclick(s)}"></Table>-->
                    </div>
                </li>
                <li>
                    <div style="text-align: right;">
                        <Page :total="total" :page-size="pageInfo.pageSize" show-elevator show-total
                              @on-change="e=>{pageSearch(e)}"></Page>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<style>
    .title-cell-class-name-test{
        background-color: #f60;
        color:#fff;
    }
    .column-cell-class-name-test{
        background-color: #187;
    }
    .column-cell-class-name-test .v-table-body-cell{
        border-color: #187;
    }
    .column-cell-class-name-test2{
        background-color: #2db7f5;
        font-weight: bold;
    }
    .column-cell-class-name-test2 .v-table-body-cell{
        border-color: #2db7f5;
    }
</style>

<script>
    import httpUtil from '../../httpRequestUtil';
    import Vue from 'vue';

    export default {
        data() {
            return {
                /*用于查找的个股编号*/
                symbol: null,
                /*选择的数量*/
                count: null,
                /*选中的组数据*/
                groupId: null,
                /*分页total属性绑定值*/
                total: 0,
                /*loading*/
                loading: true,
                /*pageInfo实体*/
                pageInfo: {
                    pageIndex: 0,
                    pageSize: 50
                },
                /*stock实体*/
                stock: {
                    symbol: null,
                    name: null,
                    area: null,
                    industry: null,
                    date: null
                },

                /*个股搜索列表*/
                stockList: [],
                /*生产类型表显示字段*/
                columns1: [
                    {field: 'id', title:'序号', width: 100, titleAlign: 'center',columnAlign:'center'},
                    {field: 'symbol', title:'个股编号', width: 150, titleAlign: 'center',columnAlign:'center'},
                    {field: 'name', title: '个股名称', width: 150, titleAlign: 'center',columnAlign:'center'},
                    {field: 'area', title: '所在区域', width: 150, titleAlign: 'center',columnAlign:'center'},
                    {field: 'industry', title: '所属版块',width: 150, titleAlign: 'center',columnAlign:'center'},
                    {field: 'date', title: '上市时间', width: 150,titleAlign: 'center',columnAlign:'center'},
                    {field: 'custome-adv', title: '操作',width: 150, titleAlign: 'center',columnAlign:'center',componentName:'table-operation',isResize:true}
                ],
                /*生产类型表数据*/
                datas: []
            };
        },
        mounted() {
            /*页面初始化调用方法*/
            this.getTable({
                'pageInfo': this.pageInfo,
                'symbol': this.symbol
            });
        },
        methods: {
            /*pageInfo实体初始化*/
            initPageInfo() {
                this.pageInfo.pageIndex = 0;
                this.pageInfo.pageSize = 50;
            },
            /*stock实体初始化*/
            initStock() {
                this.stock.symbol = null;
                this.stock.name = null;
                this.stock.area = null;
                this.stock.industry = null;
                this.stock.date = null;
            },

            stockSet(e) {
                this.menu.symbol = e.symbol;
                this.menu.name = e.name;
                this.menu.area = e.area;
                this.menu.industry = e.industry;
                this.menu.date = e.date;
            },

            /*得到表数据*/
            getTable(e) {
                var that = this;
                console.log(JSON.stringify(e));
                httpUtil.postData(
                    '/one/list',
                    {
                        'pageIndex': e.pageInfo.pageIndex,
                        'pageSize': e.pageInfo.pageSize,
                        'symbol': e.symbol
                    }, function (data, message) {
                        if(data == null){
                            return null;
                        }
                        that.datas = data.result.list;
                        that.total = data.result.totalCount;
                    });
                /*this.axios({
                  method: 'get',
                  url: '/one/list',
                  params: {
                    'pageIndex': e.pageInfo.pageIndex,
                    'pageSize': e.pageInfo.pageSize,
                    'symbol': e.symbol
                  }
                }).then(function (response) {
                    this.data1=response.data.data;
                    this.total=response.data.totalCount;
                }.bind(this)).catch(function (error) {
                  alert(error);
                });*/
            },

            /*搜索按钮点击事件*/
            search() {
                this.initPageInfo();
                this.getTable({
                    'pageInfo': this.pageInfo,
                    'symbol': this.symbol
                });
            },
            /*分页点击事件*/
            pageSearch(e) {
                this.pageInfo.pageIndex = e - 1;
                this.getTable({
                    'pageInfo': this.pageInfo,
                    'symbol': this.symbol
                });
            },
            cancel() {
                this.$Message.info('点击了取消');
            },
            /*table选择后触发事件*/
            change(e) {
                if (e.length == 1) {
                    this.stockModifySet(e['0']);
                }
                this.setGroupId(e);
            },
            /*通过选中的行设置groupId的值*/
            setGroupId(e) {
                this.groupId = [];
                this.count = e.length;
                for (var i = 0; i <= e.length - 1; i++) {
                    this.groupId.push(e[i].id);
                }
            },
            /*表格中双击事件*/
            dblclick(e) {
                this.stockModifySet(e);
                this.modifyModal = true;
                this.datas.sort();
            },
            columnCellClass(rowIndex,columnName,rowData){

                // 给三行column为‘hobby’的列设置className
                /*if (rowIndex === 1 && columnName==='hobby'){

                    return 'column-cell-class-name-test';
                }*/

                // 给第二行设置className
                /*if (rowIndex ===1){

                    return 'column-cell-class-name-test2';
                }*/

                // 给姓名为‘周伟’的行设置className
                if (rowData.name === '周伟'){

                    return 'column-cell-class-name-test';
                }
            },

            rowClick(rowIndex,rowData){
                console.log(rowIndex);
                console.log(rowData);
            }
        }
    };

    // 自定义列组件
    Vue.component('table-operation',{
        template:`<span>
        <a href="" @click.stop.prevent="goDailyData(rowData,index)">查看K线</a>&nbsp;
        </span>`,
        props:{
            rowData:{
                type:Object
            },
            field:{
                type:String
            },
            index:{
                type:Number
            }
        },
        methods:{
            //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
            dateFormat:function(time) {
                var date=new Date(time);
                var year=date.getFullYear();
                /* 在日期格式中，月份是从0开始的，因此要加0
                 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                 * */
                var month= date.getMonth()+1<10 ? '0'+(date.getMonth()+1) : date.getMonth()+1;
                var day=date.getDate()<10 ? '0'+date.getDate() : date.getDate();
                var hours=date.getHours()<10 ? '0'+date.getHours() : date.getHours();
                var minutes=date.getMinutes()<10 ? '0'+date.getMinutes() : date.getMinutes();
                var seconds=date.getSeconds()<10 ? '0'+date.getSeconds() : date.getSeconds();
                // 拼接
                return year+month+day;
            },
            goDailyData(){
                console.log(this.index+JSON.stringify(this.rowData));
                //this.$router.push('/one/daily_data/'+this.rowData.symbol);
                this.$router.push({path:'/one/daily_data', query: { symbol: this.rowData.symbol,endDate:this.dateFormat(new Date())}});
            },
            update(){
                console.log(this.index+JSON.stringify(this.rowData));
                // 参数根据业务场景随意构造
                let params = {type:'edit',index:this.index,rowData:this.rowData};
                this.$emit('on-custom-comp',params);
            },

            deleteRow(){
                // 参数根据业务场景随意构造
                let params = {type:'delete',index:this.index};
                this.$emit('on-custom-comp',params);

            }
        }
    });
</script>
